<template>
  <div class="goods_new">
    <van-nav-bar title="产品中心" left-arrow @click-left="goback"/>
    <dir style="color:#fff;height: 100px;background-size: cover;margin:0;display: flex;padding:0;align-content: center;justify-content: center;flex-wrap:wrap;" :style="{backgroundImage:`url(${bannerimg})`}">
      <span style="width: 100%;text-align: center;font-size: 18px;">大胎网服务中心</span>
      <span style="border-bottom:1px solid #fff;width:50px;"></span>
    </dir>
    <van-grid :border="false" :column-num="3">
        <van-grid-item @click="clickSel(1)" :class="[$route.query.type == 1 ? 'activeClass' : '']">
            综合
        </van-grid-item>
        <van-grid-item  @click="clickSel(2)" :class="[$route.query.type == 2 ? 'activeClass' : '']">
            价格
        </van-grid-item>
        <van-grid-item  @click="clickSel(3)" :class="[$route.query.type == 3 ? 'activeClass' : '']">
            销量
        </van-grid-item>
    </van-grid> 
    <van-list v-model="loading"
              :finished="finished"
              :immediate-check="false"
              finished-text="没有更多了"
              @load="getNewtList">
              <van-grid  :column-num="2">
                <van-grid-item v-for="(item, i) in list" :key="i" @click="goDetail(item.id)">
                    <img :src="item.url" style="width: 100%;">
                    <p>{{item.name}}</p>
                    <span style="color: #ff6600;">￥{{item.price}}</span>
                </van-grid-item>
             </van-grid>
    </van-list>
  </div>
</template>

<script>
import { storeProductList } from '@/api/api';
import { DropdownMenu, DropdownItem, Grid, GridItem, Toast, Card, NavBar, List, Row, Col, Stepper, SubmitBar } from 'vant';
import scrollFixed from '@/mixin/scroll-fixed';
import { setLocalStorage, getLocalStorage } from '@/utils/local-storage';
import _ from 'lodash';

export default {
  mixins: [scrollFixed],
  inject:["reload"],
  data() {
    return {
      sel: 1,
      selIn: false,
      sort: '',
      order: '',
      bannerimg: require('@/assets/images/integral-banner.jpg'),
      list: [],
      jifen: 0,
      page: 1,
      limit: 10,
      isSubmit: false,
      loading: false,
      finished: false,
      sessionStore: ''
    };
  },


  created() {
    this.init();
  },

  methods: {
    init() {
      this.page = 0;
      this.list = [];
      if (!getLocalStorage('storeId').storeId) {
          axios.get(process.env.VUE_APP_BASE_API+'/wx/store/index').then(res => {
          this.sessionStore = res.data.data.userId
          console.log(this.sessionStore,'123')
        })
      } else {
           this.sessionStore = getLocalStorage('storeId').storeId
           console.log(this.sessionStore,'456')
      }
      this.getNewtList();
    },
    getNewtList() {
      this.page++;
      storeProductList({
        page: this.page,
        limit: this.limit,
        storeId: this.sessionStore,
        sort: window.sessionStorage.getItem('sort'),
        order: window.sessionStorage.getItem('order')
      }).then(res => {
          
        console.log(res)
        this.list.push(...res.data.data.list);
        this.loading = false;
        this.finished = res.data.data.page >= res.data.data.pages;
      });
    },
    getCheckedList(goods) {
      let result = [];
      _.each(goods, v => {
        if (v.checked) {
          result.push(v.id);
        }
      });
      return result;
    },
    goDetail(id) {
      // return `#/items/detail/${id}`;
      this.$router.push(`/items/detail/${id}`);
      
    },
    goback() {
      this.$router.go(-1);
    },
    clickSel(data) {
        
        if (data === 2) {
            this.sort = 'price'
            window.sessionStorage.setItem('sort', 'price')
            if (data != this.$route.query.type) {
                window.sessionStorage.setItem('order', 'asc')
            } else {
               window.sessionStorage.getItem('order') === 'asc'? window.sessionStorage.setItem('order', 'desc'): window.sessionStorage.setItem('order', 'asc')
            }
        } else if (data === 3) {
            window.sessionStorage.setItem('sort', 'sales_volume')
            if (data != this.$route.query.type) {
                window.sessionStorage.setItem('order', 'asc')
            } else {
                window.sessionStorage.getItem('order') === 'asc'? window.sessionStorage.setItem('order', 'desc'): window.sessionStorage.setItem('order', 'asc')
            }
        }
        this.$router.push('/goods?type='+data)
        this.reload()
    }
  },

  components: {
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
    [Grid.name]: Grid,
    [GridItem.name]: GridItem,
    [Stepper.name]: Stepper,
    [SubmitBar.name]: SubmitBar,
    [List.name]: List,
    [Row.name]: Row,
    [Col.name]: Col,
    [Card.name]: Card,
    [NavBar.name]: NavBar,
    Toast
  }
};
</script>

<style lang="scss" scoped>
.juzhong {
  display: flex;
  justify-content: center;
  align-items: center;
}
.activeClass {
    color: #ff6600;
}
</style>